<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>花间电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />

		<!--	js代码	-->
		<script type="text/javascript">

			//在网页加载完成后执行
			$(function () {
				//引入公共头部、中间导航条以及页脚
				$(".header").load("components/head.html")
				$(".footer").load("components/footer.html")
				$(".middleNavigation").load("components/middleNavigationBar.html")

				//在页面完成之后自动发送ajax请求
				$.ajax({
					url : "/user/queryUser" ,
					type: "get",
					dataType: "json",
					success: function (res) {
						if (res.status === 200){
							$("#username").val(res.data.username) //修改用户名
							$("#phone").val(res.data.phone) //修改电话
							$("#email").val(res.data.email) //修改邮箱
							//修改性别
							if (res.data.gender === 0){
								//prop()表示给某个元素添加属性和属性值
								$("#gender-female").prop("checked","checked")
							}else{
								$("#gender-male").prop("checked","checked")
							}
						}
					},
					error: function (error) {
						alert("服务器出现故障，请等待攻城狮修复！！")
					}
				});

				//给用户更改信息绑定点击事件
				$("#btn-change-info").click(function () {
					//根据用户选择状态决定是否发生ajax请求
					if (confirm("确定要修改吗？")){
						let phone = $("#phone").val();
						let email = $("#email").val();
						if (phone == "" || email == ""){
							$("#error-msg").html("请先填写需要修改的信息！");
							return false;
						}
						let checkPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (!checkPhone.test(phone)){
							$("#error-msg").html("手机号不符合要求！");
							return false;
						}
						//验证邮箱是否符合规则
						let checkEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
						if (!checkEmail.test(email)){
							$("#error-msg").html("邮箱不符合要求！");
							return false;
						}
						$.ajax({
							url : "/user/updateInfo",
							type: "post",
							data: $("#form-change-info").serialize(),//获取表单的所有内容
							dataType: "json",
							success: function (res) {
								if (res.status === 200){
									alert("修改成功！")
									//将回传的用户信息进行更新
									sessionStorage.setItem("user",JSON.stringify(res.data))
									//网页刷新
									location.reload();
								}else {
									$("#error-msg").html(res.message);
								}
							},
							error: function (error) {
								alert("服务器出现故障，请等待攻城狮修复！！")
							}
						});
					}
				})

			})
		</script>
	</head>

	<body>
		<!--头部开始-->
		<div class="header"></div>
		<!--头部结束-->

		<!--中间导航条开始 -->
		<div class="middleNavigation"></div>
		<!--中间导航条结束-->

		<div class="container">
			<div class="col-md-2">
				<!--左侧导航开始-->
				<div class="panel-group" id="accordion">
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：我的订单-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">我的订单</a>
							</p>
						</div>
						<div id="collapseOne" class="panel-collapse collapse">
							<div class="panel-body">
								<div><a href="orders.html">全部订单</a></div>
								<div><a href="orders.html">待付款</a></div>
								<div><a href="orders.html">待收货</a></div>
								<div><a href="orders.html">待评价</a></div>
								<div><a href="orders.html">退货退款</a></div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：资料修改-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">资料修改</a>
							</p>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse in">
							<div class="panel-body">
								<div><a href="password.html">修改密码</a></div>
								<div><a href="userdata.html"><b>个人资料</b></a></div>
								<div><a href="upload.html">上传头像</a></div>
								<div><a href="address.html">收货管理</a></div>
							</div>
						</div>
					</div>
				</div>
				<!--左侧导航结束-->
			</div>
			<div class="col-md-10	">
				<div class="panel panel-default">
					<ul class="nav nav-tabs">
						<li><a href="password.html">修改密码</a></li>
						<li class="active"><a href="#">个人资料</a></li>
						<li><a href="upload.html">上传头像</a></li>
						<li><a href="address.html">收货管理</a></li>
					</ul>
					<div class="panel-body">
						<!--修改资料表单开始-->
						<form id="form-change-info" class="form-horizontal" role="form">
							<div class="form-group">
								<label class="col-md-2 control-label">用户名：</label>
								<div class="col-md-8">
									<input id="username" type="text" class="form-control" value="默认名字" readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">电话号码：</label>
								<div class="col-md-8">
									<input id="phone" name="phone" type="text" class="form-control" placeholder="请输入电话号码" value="">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">电子邮箱：</label>
								<div class="col-md-8">
									<input id="email" name="email" type="text" class="form-control" placeholder="请输入电子邮箱" value="">
								</div>
							</div>
							<div id="sex" class="form-group">
								<label class="col-md-2 control-label">性别：</label>
								<div class="col-md-8">
									<label class="radio-inline">
										<input id="gender-male" type="radio" name="gender" value="1" >男
									</label>
									<label class="radio-inline">
										<input id="gender-female" type="radio" name="gender" value="0">女
									</label>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-1">
									<input id="btn-change-info" type="button" class="btn btn-primary" value="修改" />
								</div>
								<div id="error-msg" class="col-sm-8" style="color: red;font-weight:bold;padding-top: 5px" ></div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>


		<div class="clearfix"></div>

		<!--页脚开始-->
		<div class="footer"></div>
		<!--页脚结束-->

	</body>

</html>